<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '../store/user'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

// 根据当前路由设置底部导航活跃项
const active = ref(0)

// 更新底部导航活跃项
const updateActive = () => {
  const path = route.path
  if (path.includes('/hotels')) {
    active.value = 0
  } else if (path.includes('/profile')) {
    active.value = 1
  }
}

// 监听路由变化
onMounted(() => {
  updateActive()
})

// 底部导航项切换
const onChange = (index: number) => {
  if (index === 0) {
    router.push('/home/hotels')
  } else if (index === 1) {
    router.push('/home/profile')
  }
}
</script>

<template>
  <div class="layout-container">
    <div class="content">
      <router-view />
    </div>
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="home-o">酒店列表</van-tabbar-item>
      <van-tabbar-item icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style scoped>
.layout-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content {
  flex: 1;
  overflow-y: auto;
}
</style> 